<template>
    <div class="coupon-code-container">
        <!--<div class="pic-wrapper">-->
        <!--<img :src="couponCode.couponpic" >-->
        <!--</div>-->
        <div class="content-wrapper">
            <div class="redeemCode">
                <span>券号:{{couponCode.redeemCode}}</span>
            </div>
            <div class="code">
                <div class="qrCode-wrapper">
                    <img :src="couponCode.qrCode" v-show="couponCode.qrCode!='000000'">
                    <span v-show="couponCode.qrCode=='000000'">二维码过期</span>
                </div>
            </div>
            <div class="reciprocal">
                {{totalTime}}秒后将刷新二维码
            </div>
            <!--<div class="goBack">-->
            <!--<van-button round type="primary" size="large" @click="$router.go(-1)">返回列表</van-button>-->
            <!--</div>-->
            <div class="coupon-name-info">
                <van-row>
                    <van-col span="24">
                        <div class="coupon-name-text"><i></i><span>卡券名称</span></div>
                    </van-col>
                </van-row>
                <van-row>
                    <van-col span="24">
                        <div class="coupon-name-value">
                            <section>{{couponCode.couponName}}</section>
                        </div>
                    </van-col>
                </van-row>
            </div>
            <div class="use-rules">
                <van-row>
                    <van-col span="24">
                        <div class="use-rules-text"><i></i><span>使用规则</span></div>
                    </van-col>
                </van-row>
                <van-row>
                    <van-col span="24">
                        <div class="use-rules-value">
                            <section v-html="couponCode.useRules"></section>
                        </div>
                    </van-col>
                </van-row>
            </div>

            <div class="goBack" v-if="isDev">
                <van-button round type="primary" size="large" @click="isDev&&beforeWritteOff()">测试核销检查</van-button>
                <hr>
                <van-button round type="primary" size="large" @click="isDev&&send('hello')">推送消息</van-button>
            </div>
        </div>
    </div>
</template>

<script>
    import Cookies from 'js-cookie'
    import {isDev} from "../../utils/tools";
    import {baseWebSocketUrl} from "../../utils/global";

    const seconds = 180
    export default {
        name: "CouponCode",
        components: {},
        data() {
            return {
                isDev: isDev,
                id: '',
                token: '',
                couponCode: '',
                totalTime: seconds,
                clock: null,
                socket: "",
                path: baseWebSocketUrl + "/api/bizCouponCode/",
            }
        },
        created() {

        },
        mounted() {
            console.log("isDev ", this.isDev)

            this.token = Cookies.get("token")
            this.id = this.$route.query.id
            this.fetchCouponCode()
            this.countDown()
            this.path = this.path + this.token
            this.initWebscoket()

        },
        computed: {},
        methods: {
            fetchCouponCode() {
                console.log("json", {openId: this.token, id: this.id})
                this.$api.couponmine.couponCode({openId: this.token, id: this.id}).then(res => {
                    console.log(isDev && res.data);
                    this.couponCode = res.data
                }).catch(error => {
                    console.log(error)
                })
            },
            countDown() {
                this.clock = window.setInterval(() => {
                    this.totalTime--
                    if (this.totalTime < 0) {
                        window.clearInterval(this.clock)
                        this.fetchCouponCode()
                        this.totalTime = seconds
                        //this.countDown()
                    }
                }, 1000)
            },
            beforeWritteOff() {
                let uuid = this.couponCode.uuid
                console.log("uuid", uuid)
                this.$api.couponmine.beforeWriteOff({
                    qrCodeKey: uuid,
                    writeOffOperationId: '123',
                    writeOffType: 'app'
                }).then(res => {
                    console.log(res)
                }).catch(error => {
                    console.log(error);
                })
            },


            initWebscoket() {
                if (typeof WebSocket === 'undefined') {
                    console.log("不支持websocket")
                    return
                } else {
                    // 实例化socket
                    this.socket = new WebSocket(this.path)
                    // 监听socket连接
                    this.socket.onopen = this.open
                    // 监听socket错误信息
                    this.socket.onerror = this.error
                    // 监听socket消息
                    this.socket.onmessage = this.getMessage
                }
            },
            open: function () {
                console.log("socket连接成功")
            },
            error: function () {
                console.log("连接错误")
            },
            getMessage: function (msg) {
                console.log("getMessage ", msg.data)
                if (msg.data && msg.data === 'close') {
                    this.$router.go(-1);
                }

            },
            send: function (params) {
                this.socket.send(params)
            },
            close: function () {
                console.log("socket已经关闭")
            }
        },
        beforeDestroy() {
            window.clearInterval(this.clock)
        }
    }
</script>

<style lang="less">
    @import "../../assets/less/base";

    .coupon-code-container {
        min-height: 100%;
        position: relative;
        background-color: #F1F5F8;
        .pic-wrapper {
            width: 100%;
            height: 200px;
            overflow-y: hidden;
            img {
                width: 100%;
            }
        }
        .content-wrapper {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            /*margin: 0 15px;*/
            border-radius: 15px;
            background-color: #fff;
            border-radius: 15px;
            .redeemCode {
                border-top-left-radius: 15px;
                border-top-right-radius: 15px;
                width: 100%;
                text-align: center;
                span {
                    display: inline-block;
                    height: 40px;
                    line-height: 40px;
                    color: @main-theme-color;
                    font-weight: 700;
                    padding: 10px 0;
                }
            }
            .code {
                text-align: center;
                .qrCode-wrapper {
                    display: flex;
                    justify-content: center; /* 水平居中 */
                    align-items: center; /* 垂直居中 */
                    margin: 0 auto;
                    padding: 10px;
                    width: 200px;
                    height: 200px;
                    border: 1px dashed @front-font-color;
                    border-radius: 15px;
                    span {
                        text-align: center;
                        display: inline-block;
                    }
                }

            }
            .reciprocal {
                text-align: center;
                margin: 5px auto;
                .fz(12px);
                color: @front-font-color;
            }
            .coupon-name-info {
                height: 20px;
                margin: 20px 0;
                .coupon-name-text {
                    height: 20px;
                    margin: 20px 0 10px 10px;
                    color: @front-font-color;
                    background: url("/images/weixin2/hbg1.png") no-repeat;
                    background-size: contain;
                    padding-left: 6px;
                    span {
                        /*padding-left: 10px;*/
                    }
                }
                .coupon-name-value {
                    margin: 10px 0 10px 10px;
                    padding: 2px 2px;
                    padding-bottom: 10px;
                    color: @front-font-color;
                    word-wrap: break-word;
                    p {
                        margin: 0;
                    }
                }
            }
            .use-rules {
                height: 20px;
                margin: 20px 0;
                .use-rules-text {
                    height: 20px;
                    line-height: 20px;
                    margin: 10px 0 10px 10px;
                    padding-left: 6px;
                    color: @front-font-color;
                    background: url("/images/weixin2/hbg1.png") no-repeat;
                    background-size: contain;
                    span {
                        /*padding-left: 10px;*/
                    }
                }
                .use-rules-value {
                    margin: 10px 0 10px 10px;
                    padding: 2px 2px;
                    padding-bottom: 50px;
                    color: @front-font-color;
                    word-wrap: break-word;
                    p {
                        margin: 0;
                    }
                }
                .use-rules-value.pb50 {
                    padding-bottom: 50px;
                }
            }
            .goBack {
                margin: 0 10px;
                margin-top: 20px;
                button {
                    background-color: @main-theme-color;
                    border: 1px solid @main-theme-color;
                }
            }
        }
    }


</style>
